<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>注册页面</title> 
    <style>
      body {  
          font-family: Arial, sans-serif;  
          background-color: #f4f4f4;  
          margin: 0;  
          padding: 20px;  
          display: flex;  
          justify-content: center;  
          align-items: center;  
          height: 100vh;  
      }  
        
      .register-container {  
          background-color: #fff;  
          padding: 20px;  
          border-radius: 8px;  
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
          width: 300px;  
          text-align: center;  
      }  
        
      .register-container h2 {  
          margin-bottom: 20px;  
          color: #333;  
      }  
        
      .form-group {  
          display: flex; 
          align-items: center; 
          text-align: right;
          margin-bottom: 15px; 
      }  
        
      .form-group label {  
          flex-grow: 1; 
          margin-right: 10px; 
          margin-bottom: 5px;  
          color: #666;  
      }  
        
      .form-group input {  
          width: 70%; 
          padding: 8px;  
          box-sizing: border-box;  
          border: 1px solid #ccc;  
          border-radius: 4px;  
      }  
        
      .form-group input:focus {  
          border-color: #007bff;  
          outline: none;  
      }  
         
      .form-group button {  
          width: 100%;  
          padding: 10px;  
          background-color: #007bff;  
          color: white;  
          border: none;  
          border-radius: 4px;  
          cursor: pointer;  
          font-size: 16px;  
      }  
        
      .form-group button:hover {  
          background-color: #0056b3;  
      }  
    </style> 
    <script type="text/javascript" src="js/jquery-3.6.0.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#register").click(function(){
					var json_str = JSON.stringify({
						userName:$("#userName").val(), password:$("#password").val(),
						 phone:$("#phone").val(), email:$("#email").val()
					});
					$.ajax({
						type:"post",
						data:json_str,
						url:"/experiment05/user/register",
						contentType : "application/json",
						success:function(data){
							if(data.code == "10000") {
                                 window.location.href = "../index.html";
                                 alert("注册成功！");
                            } else{
                                alert(data.msg);
                            }
						}
					})
				})
			})
		</script>
</head>  
<body>  
    <div class="register-container">  
        <h2>注册新用户</h2>  
        <form action="register" method="post">  
            <div class="form-group">  
                <label for="userName">用户名:</label>  
                <input type="text" id="userName" name="userName" required>  
            </div>  
            <div class="form-group">  
              <label for="email">电子邮件:</label>  
              <input type="email" id="email" name="email" required>  
            </div>  
            <div class="form-group">  
              <label for="email">手机号:</label>  
              <input type="text" id="phone" name="phone" required>  
            </div>  
            <div class="form-group">  
                <label for="password">密码:</label>  
                <input type="password" id="password" name="password" required>  
            </div>  
            <div class="form-group">  
                <label for="confirmPassword">确认密码:</label>  
                <input type="password" id="confirmPassword" name="confirmPassword" required>  
            </div>  
            <div class="form-group">  
                <button id="register" type="button">注册</button>  
            </div>  
        </form>  
    </div>  
  
</body>  
</html>